<!DOCTYPE html>
<html>
<head>
	<% include link %>
	<link rel="stylesheet" type="text/css" href="/css/user.css">
	<link rel="stylesheet" type="text/css" href="/css/wangEditor.min.css">
	<link rel="stylesheet" type="text/css" href="/bower_components/cropper/dist/cropper.css">
	<style type="text/css">
		#editor img{
			width: 100%;
			height: auto;
		}
	</style>
</head>
<body>
	<% include head %>
	<div class="myself-top-head">
		<img src="/images/myselfTitle.png" class="myself-top-img">
	</div>
	<div class="container">
		<div class="row ">
			<% include usermodle %>
	  		<div class="col-md-8  body-right ">
	  			<span class="body-right-titlesp"></span>
	  			<p class="body-right-title">&nbsp;&nbsp;文章投稿</p>
		  		<div class="myself-body-div">
						<div class="form-group">
							<label for="title">文章标题</label>
							<input type="text" class="form-control" id="title" name="title" placeholder="Enter title">
						</div>
						<div class="form-group" >
								<label for="exampleInputFile" >选择封面</label>
								<a href="javascript:void(0);" class="thumbnail" style="margin: 10px 0px;width:50%;height: auto; ;">
								<img id="showUpHead" src="../images/16-10.png" style="height:auto;width:100%;">
								</a>
								<button type="button" id="open_imgcro" class="btn btn-info active" data-toggle="modal" data-target="#myModal" >
								  选择图片
								</button>

						</div>
						<div class="form-group">
							<label for="content">文章内容</label>
							<div style="width:100%">
								<!--用当前元素来控制高度-->
								<div id="editor" style="height:400px;max-height:500px;">
									<p>请输入内容...</p>
								</div>
							</div>
						</div>

						<div class="form-group">
							<label for="examplela">分类</label></br>
							<ul class="tag">
								<li data-tag="WorkEmotion">工作.情感</li>
								<li data-tag="CartoonNovel">漫画.小说</li>
								<li data-tag="MoviesComic">影视.动漫</li>
								<li data-tag="ScienceCulture">科技.文化</li>
								<li data-tag="MusicFashion">音乐.时尚</li>
							</ul>
						</div>
						
						<div class="col-md-4 col-md-offset-4 " style="clear:both;margin-top:20px;" >
							<button id="all_save"  class="btn btn-lg btn-block btn-info active">发布</button>
						</div>
				</div>
	  		</div>
		</div>
	</div>


	<div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
					<h4 class="modal-title" id="myModalLabel">上传封面</h4>
				</div>
				<div class="modal-body">
					<a href="javascript:void(0);" id="article-img-a" class="thumbnail" style="margin:0px auto;width:80%;height: 320px; ">
					</a>
					<input id="img_file" type="file" accept="image/*" id="imgFile" name='imgFile'  onchange="selectImage(this);">	
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button id="article_save_img" type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
				</div>
			</div>
		</div>
	</div>

	<% include foot %>
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/cropper/dist/cropper.js"></script>
<script type="text/javascript" src="/js/wangEditor.min.js"></script>
<script type="text/javascript">

	var editor = new wangEditor('editor');
    
    editor.config.menus = $.map(wangEditor.config.menus, function(item, key){
    	if (item === 'location') {
    		return null
    	}
    	if (item === 'video') {
    		return null
    	}
    	if (item === 'redo') {
    		return null
    	}
    	if (item === 'source') {
    		return null
    	}
    	if (item === 'table') {
    		return null
    	}
    	if (item === 'forecolor') {
    		return null
    	}
    	if (item === 'bgcolor') {
    		return null
    	}
    	if (item === 'strikethrough') {
    		return null
    	}
    	if (item === 'fullscreen') {
    		return null
    	}
    	if (item === 'fontfamily') {
    		return null
    	}
    	return item;
    })

    editor.config.uploadImgUrl = '/articles/articleImg'
    editor.config.uploadImgFileName = 'articleimg'

    editor.create();

	var imgPath = '';
	var tag = '';
	$('#user-uparticle').addClass("active");

	$('.tag li').click(function(){
		$('.tag li').removeClass("on");
		$(this).addClass("on");
		tag = $(this).data('tag');
	});


	$('#all_save').click(function(){
		var title = $('#title').val();
		// var content = $('#content').val();
		var content = editor.$txt.html()

		if (title!='' && content!='' && imgPath !='' && tag != '') {
			$.ajax({
				url:'/articles/post',
				type:'post',
				data:{
						'title':title,
						'content':content,
						'imgPath': imgPath,
						'tag':tag,
						'upUser':'<%- user._id %>',
					},
				success: function(date){
					// console.log(date);
					window.location.href="/articles/list"; 
				}
			});
		} else {
			alert("亲　您还有未填写的信息　无法发布");
		}
	});


	function selectImage(file) {
		if (!file.files || !file.files[0]) {
			return;
		}
        var reader = new FileReader();
		reader.onload = function (evt) {
			$('#article-img-a').html('<img id="myimg" src="'+evt.target.result+'">');
			imageload(16,10,$("#myimg"));
			btnload();

		}
		reader.readAsDataURL(file.files[0]);
    }
	

	function btnload(){

		$("#article_save_img").on("click", function() {  
			var src = $image.eq(0).attr("src");  
			var canvasdata = $image.cropper("getCanvasData");  
			var cropBoxData = $image.cropper('getCropBoxData');
			convertToData(src, canvasdata, cropBoxData, function(basechar) {
				$('#showUpHead').attr("src", basechar);
				imgPath = basechar;
		    });  
		})

	}
	
</script>
</body>
</html>